<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      height="400"
      style="width: 100%;margin-top:10px; overflow:auto"
      border
      tooltip-effect="dark"
    >
      <el-table-column label="序号" type="index" header-align="center" align="center" width="60" />
      <el-table-column header-align="center" align="left" label="文档名" show-overflow-tooltip>
        <template slot-scope="scope">

          <img
            v-if="!scope.row.suffix"
            style="position: absolute;top:14px"
            src="../../../assets/images/Folder-02.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='docx' || scope.row.suffix==='doc'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Word.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='xlsx' || scope.row.suffix==='xls'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Excel.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='png'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Picture.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='jpg'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Picture.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='jpeg'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Picture.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='pdf'"
            style="position: absolute;top:14px"
            src="../../../assets/images/PDF.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='ppt'"
            style="position: absolute;top:14px"
            src="../../../assets/images/PPT.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='txt'"
            style="position: absolute;top:14px"
            src="../../../assets/images/TXT.png"
            width="18px"
            height="18px"
          >
          <img
            v-else-if="scope.row.suffix==='zip'"
            style="position: absolute;top:14px"
            src="../../../assets/images/Zip.png"
            width="18px"
            height="18px"
          >
          <img
            v-else
            style="position: absolute;top:14px"
            src="../../../assets/images/Unknown.png"
            width="18px"
            height="18px"
          >
          <label style="margin-left:40px;width:160px;">
            <span v-if="!['png','jpeg','jpg','pdf','docx','doc'].includes(scope.row.suffix)">{{ scope.row.originalName }}</span>
            <span v-else-if="['png','jpeg','jpg','pdf','docx','doc'].includes(scope.row.suffix)">
              <a
                style="color:#606266;"
                target="_blank"
                @click="yulan(scope)"
                v-html="scope.row.originalName"
              />
            </span>
          </label>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="大小" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.fileSize === '-'">-</span>
          <span v-else>{{ scope.row.fileSize }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="记录类型" width="150px">
        <template slot-scope="scope">
          <span>{{ getDicName(scope.row.flag,'CDS_RECORDS_TYPE') }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" label="创建人员" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.createuserName }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" label="创建时间" width="150">
        <template slot-scope="scope">
          {{ scope.row.createtimeTi }}
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="viewPhotoVisible" append-to-body width="640px" title="预览">
      <view-photo v-if="viewPhotoVisible" ref="viewPhoto" :proid="code" :visible.sync="viewPhotoVisible" />
    </el-dialog>

    <el-dialog :visible.sync="viewPdfVisible" append-to-body width="1200px" title="预览">
      <view-pdf v-if="viewPdfVisible" ref="viewPdf" :proid="code" :visible.sync="viewPdfVisible" />
    </el-dialog>

    <el-dialog :visible.sync="evaluateListVisible" width="1000px" append-to-body :title="'评价列表'">
      <evaluate-list v-if="evaluateListVisible" ref="evaluateList" :proid="code" :visible.sync="evaluateListVisible" />
    </el-dialog>

    <el-dialog :visible.sync="xmViewVisible" append-to-body width="640px" title="审批意见">
      <xm-view v-if="xmViewVisible" ref="xmView" :proid="code" :visible.sync="xmViewVisible" />
    </el-dialog>
  </div>
</template>

<script>

import { getHistory, downloadFile } from '@/api/publicFile'
import { getDictListByCode } from '@/api/dict'

import ViewPhoto from './viewPhoto' // eslint-disable-line no-unused-vars
import ViewPdf from './viewPdf'
import XmView from './view' // eslint-disable-line no-unused-vars
import evaluateList from './evaluateList' // eslint-disable-line no-unused-vars

export default {
  components: { ViewPhoto, ViewPdf, XmView, evaluateList },
  inject: ['getList'],
  props: { // 第二种方式
    history: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      listLoading: false,
      viewPhotoVisible: false,
      viewPdfVisible: false,
      xmViewVisible: false,
      evaluateListVisible: false,
      list: [],
      spTypes: [],
      ShowHidden: false
    }
  },
  created() {
    this.loadList()
    this.getDictEntry('CDS_RECORDS_TYPE')
  },
  mounted() {
    document.addEventListener('click', this.HiddenClick)
  },
  methods: {
    loadList() { // 加载列表
      this.list = []

      getHistory({ batchCode: this.history }).then(response => {
        const { data } = response

        this.list = data
        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    getDictEntry(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_RECORDS_TYPE') {
          this.spTypes = response.data
        }
      })
    },
    getDicName(code, flag) {
      var dict = []
      if (flag === 'CDS_RECORDS_TYPE') {
        dict = this.spTypes
        for (var i in dict) {
          if (dict[i].code === code) {
            return dict[i].name
          }
        }
      }
    },
    yulan(scope) {
      if (['png', 'jpeg', 'jpg', 'PNG', 'JPEG', 'JPG'].includes(scope.row.suffix)) {
        this.viewPhotoVisible = true
        this.code = scope.row.id
        this.$nextTick(() => {
          this.$refs.viewPhoto
        })
      } else if (['pdf', 'docx', 'doc', 'PDF', 'DOCX', 'DOC'].includes(scope.row.suffix)) {
        this.viewPdfVisible = true
        this.code = scope.row.id
        this.$nextTick(() => {
          this.$refs.viewPdf
        })
      }
    },
    handleView(scope) {
      this.xmViewVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.xmView
        this.$refs.xmView.getDetailed()
      })
    },
    evaluateList(scope) {
      this.evaluateListVisible = true
      this.code = scope.row.id
      this.$nextTick(() => {
        this.$refs.evaluateList
      })
    },
    download(scope) {
      downloadFile({ id: scope.row.id }).then(response => {
        var fileName = scope.row.originalName
        const contentDisposition = response.headers['content-disposition']
        if (contentDisposition) {
          fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1], 'UTF-8')
        }
        const blob = new Blob([response.data], {
          type: `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet` // word文档为msword,pdf文档为pdf
        })
        const objectUrl = URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.href = objectUrl
        link.setAttribute('download', fileName)
        document.body.appendChild(link)
        link.click()
        // 释放内存
        window.URL.revokeObjectURL(link.href)
      })
    },
    // 点击页面事件 隐藏需要隐藏的区域
    HiddenClick() {
      this.ShowHidden = false
    },
    // 鼠标划入展示
    enter() {
      this.seen = true
      this.ShowHidden = false
    },
    // 鼠标移除隐藏
    leave() {
      this.seen = false
      this.ShowHidden = false
    },
    // 鼠标移入行
    cellMouseEnter(row, column, cell, event) {
      // 显示操作条  找一个特殊的条件判断，否则影响其他元素
      // console.log(cell.firstChild.className.trim())
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'inline'
        this.ShowHidden = false
      }
    },
    cellMouseLeave(row, column, cell, event) {
      // 隐藏操作条
      if (cell.firstChild.className.trim() === 'cell el-tooltip') {
        cell.firstChild.lastChild.style.display = 'none'
        this.ShowHidden = false
      }
    }
  }
}
</script>

<style scoped>
  .btn1 {
    margin-top: 25px;
    margin-left: 60px;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    left: 0;
    color: #409eff;
    border: 1px solid #ccc;
    z-index: 999;
    text-align: left;
  }
  .btn2 {
    padding: 5px 10px;
    margin: 0px 0px;
    cursor: pointer;
    text-align: left;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  .btn3 {
    margin:0px 5px;
    cursor:pointer;
    display:inline-block;
  }
</style>
